<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10_事件监听</title>
</head>
<body>
<button onclick="alert('警告框')">弹出警告框</button>
<button id="btn">我是按钮</button>
<h4>注意：天气转凉你应该做这些事</h4>
<!--<div>
    <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus ad dolor, dolorem dolorum illum, labore
        maxime minus mollitia quis quod recusandae rem repudiandae. Dignissimos excepturi neque nobis recusandae
        veritatis voluptatibus!
    </div>
    <div>Ad error est ipsum iure saepe. Cumque cupiditate dolore dolorem ducimus eius eos est excepturi, fugit incidunt
        iste natus neque pariatur quae quidem repellat saepe sed tempore temporibus totam vitae.
    </div>
    <div>At esse fugit, id necessitatibus non quisquam sit. Aliquam, blanditiis deserunt doloremque ducimus,
        exercitationem ipsa ipsum laboriosam natus officiis possimus quasi, quo sed ullam. Blanditiis dolor
        exercitationem nihil quo repellat.
    </div>
    <div>Accusamus aliquid amet aspernatur commodi cupiditate, debitis dolorem eaque et, illo ipsam iusto minima minus
        non nostrum numquam omnis provident quis quisquam repellat repellendus sapiente similique suscipit ut velit
        voluptatem.
    </div>
    <div>Architecto ducimus ipsa molestias quidem. Architecto commodi cum earum eos facere harum itaque minima nihil
        reprehenderit sed sunt suscipit, ut voluptate. Asperiores error explicabo maiores mollitia nesciunt nostrum
        numquam voluptatum.
    </div>
    <div>Asperiores atque consectetur consequatur dolorum ducimus eum harum minima mollitia quia sequi tempore vel,
        veritatis voluptates. Cum cumque cupiditate doloribus dolorum eum id numquam officiis quia quidem, voluptatem.
        Impedit, ullam!
    </div>
    <div>Amet atque dolore ex excepturi inventore magnam odio sit totam unde voluptates! At blanditiis dolorem earum
        eius eveniet, inventore minima natus nisi placeat, repellendus, voluptas voluptatum! Cupiditate impedit nostrum
        quae.
    </div>
    <div>Architecto assumenda at cumque deleniti dicta eius eveniet ex exercitationem in, incidunt, minus natus nemo
        odit officiis quis temporibus voluptatum? Error maiores molestiae nihil optio quaerat quasi repellendus
        temporibus velit.
    </div>
    <div>Commodi incidunt, quis? Ab accusamus dolore, doloremque inventore itaque minima nesciunt officia quos, rerum
        saepe sequi sint tempora tempore? Distinctio dolor eligendi ipsa laborum officiis perferendis quasi quo rem
        reprehenderit!
    </div>
    <div>Aperiam ducimus iure quae quam sit ullam! Animi aspernatur assumenda consequatur cum excepturi exercitationem
        hic inventore nemo quasi tempore. Alias cumque ducimus excepturi nulla officia quibusdam quod reiciendis
        sapiente voluptatibus.
    </div>
    <div>Aperiam consequuntur eveniet impedit itaque officia vel voluptate. Ad consequatur quisquam tenetur. Eveniet
        ipsum laudantium quia unde voluptates. Nihil, quasi, repellat. Culpa doloremque ducimus, in magnam soluta
        veritatis! Asperiores, dolore.
    </div>
    <div>Ad aut consequatur culpa, doloremque dolores esse hic iste nam numquam placeat praesentium quis vel. Amet
        exercitationem harum illum ipsam saepe? Adipisci alias facere incidunt labore laboriosam minima nostrum
        quisquam!
    </div>
    <div>Accusamus aliquam aperiam architecto assumenda autem debitis dignissimos eius eveniet excepturi iure labore
        laboriosam laudantium molestias natus, obcaecati officia omnis optio pariatur perspiciatis quasi quibusdam
        soluta sunt unde vel voluptatum!
    </div>
    <div>A, ab aliquid atque cupiditate eaque et facere fugiat harum in iste maxime nemo officia pariatur rem tempora
        temporibus totam veniam! Alias est illum ipsa libero nostrum quisquam quos voluptatum.
    </div>
    <div>Ab eligendi fugit minus modi possimus temporibus voluptas. Ab, aliquid amet autem delectus dignissimos dolorem
        earum, eveniet fugiat harum illum iste laborum magni possimus quia repellendus, totam velit! Nemo, qui!
    </div>
    <div>Ab accusamus at facere inventore nesciunt nobis pariatur praesentium quasi quod similique? Corporis molestias
        natus odit praesentium provident recusandae soluta tempora! Accusamus asperiores culpa explicabo quos
        repellendus similique tempora ut.
    </div>
    <div>Blanditiis cumque distinctio, ea earum eos et eveniet fugiat harum impedit ipsam ipsum iste itaque maiores
        modi, nam quae quas recusandae, repellendus tempore voluptas! Ad optio praesentium qui vel veritatis.
    </div>
    <div>A alias aliquid asperiores assumenda culpa cum debitis, deleniti distinctio dolore, eligendi eveniet laboriosam
        magnam minima nostrum odit optio placeat quam quis quisquam quo quod rem repellendus temporibus ut voluptate!
    </div>
    <div>Ab adipisci ex ipsam necessitatibus quidem veritatis? At dignissimos distinctio dolor fugit iusto minima modi
        necessitatibus neque quibusdam voluptatum! Accusantium blanditiis consequuntur excepturi facere, harum id iste
        laboriosam placeat quia?
    </div>
    <div>Cumque eaque ipsa quisquam! Aliquam blanditiis commodi fugit nulla praesentium quia repellat totam velit
        veritatis voluptatum. Ad alias dolore ducimus incidunt, maxime nulla officia quidem quo veniam vero vitae
        voluptates!
    </div>
    <div>Accusantium amet consectetur corporis deleniti eligendi est exercitationem facilis, incidunt ipsum labore
        magnam pariatur reiciendis rerum soluta tenetur ut vero! Ab ea error ex minus, pariatur perferendis repellat
        ullam vitae.
    </div>
    <div>Adipisci alias architecto blanditiis cupiditate earum ipsam, minus molestiae, nisi quis rem tempore tenetur. Ab
        adipisci asperiores atque dignissimos enim explicabo facilis itaque perspiciatis sunt. Eveniet facere nemo vel
        voluptates?
    </div>
    <div>Ad alias commodi et ex illo incidunt iusto labore quas quia, quibusdam repudiandae vero? Ab consectetur, culpa
        dignissimos et, harum libero magni minus molestias nesciunt, nulla quod reprehenderit totam! Nesciunt.
    </div>
    <div>Alias commodi fuga hic in laboriosam nihil numquam obcaecati odio officiis velit. Adipisci animi at corporis
        cumque, dolorem earum ex labore maxime neque quos reprehenderit sunt temporibus ut vitae voluptate.
    </div>
    <div>Blanditiis corporis deserunt dolorem, eius expedita impedit nam neque optio quia quos reprehenderit, sit
        tempore! Consequatur ipsa quos veritatis! Amet error facere fuga voluptas! Aliquam dignissimos fugiat nostrum
        quam vel.
    </div>
    <div>Ab alias aliquam beatae blanditiis delectus deleniti, distinctio doloremque et, eum modi praesentium, quam
        quidem repellat sit ullam. Aliquam debitis doloremque eius error excepturi fuga, natus pariatur quas tenetur
        unde.
    </div>
    <div>Aspernatur autem cum, eligendi facere facilis minima modi pariatur! Deserunt dolore doloremque, error excepturi
        fugiat illum ipsam iste maxime necessitatibus nulla quas, quidem sequi, tempora? Amet est libero veritatis
        voluptatem.
    </div>
    <div>Adipisci distinctio dolorem laudantium numquam tempora. Blanditiis dolores facere impedit sapiente voluptatem!
        Animi aspernatur assumenda, atque est ex fugit hic incidunt ipsum laudantium libero maiores maxime modi
        obcaecati optio saepe!
    </div>
    <div>Accusantium amet at eos fugiat harum necessitatibus nulla possimus quis repellendus sapiente? Accusantium alias
        aliquid atque doloribus esse expedita ipsum maiores nisi provident voluptatem! Doloribus enim quis repellendus
        temporibus veniam?
    </div>
    <div>Aliquam animi aut cum doloribus ducimus ea eaque earum ex excepturi, fuga fugiat fugit, labore minima minus
        natus nesciunt odit officia omnis pariatur quae quidem sunt tempora unde voluptate voluptatibus.
    </div>
    <div>Adipisci alias aliquam commodi debitis deserunt dignissimos eaque earum, ex labore nemo odio perspiciatis qui
        quibusdam, reprehenderit unde velit voluptas! Asperiores, commodi earum ex molestias mollitia quasi tempore
        temporibus. In!
    </div>
    <div>Accusantium aliquam atque dolor inventore nemo nihil quisquam quos vero. Alias animi eius fugiat neque, nostrum
        perferendis sed vitae! Deleniti fuga, incidunt necessitatibus nihil pariatur praesentium quae quidem ut
        voluptates!
    </div>
    <div>Asperiores corporis dignissimos ea harum in inventore iusto molestiae neque, nisi odio quia sapiente similique
        sunt ut vero vitae voluptatum! Architecto cumque delectus dicta dolorum id ipsum repellendus suscipit
        voluptatibus.
    </div>
    <div>Accusantium aliquam at, autem beatae dolor doloribus ducimus eius eveniet fugit hic id ipsa iusto maxime minima
        minus natus nemo nihil nisi nulla officiis optio repellat suscipit tempora ullam vel.
    </div>
    <div>Ad, aspernatur at commodi consectetur esse impedit iusto laboriosam libero nam nesciunt nulla placeat
        recusandae sed similique tempora tenetur, totam unde, voluptate? Est harum maiores quasi rem sequi sunt tempora.
    </div>
    <div>Aliquam amet dolorem esse et eum laudantium, magnam officia praesentium quibusdam quod vitae voluptatibus? Et
        fugiat modi optio quidem tempora. Aut, earum excepturi illum iste maiores maxime quidem temporibus tenetur!
    </div>
    <div>Adipisci corporis cumque deleniti, distinctio, ducimus earum et iure molestiae nemo nobis, quaerat quam quia
        quisquam. Aliquam autem beatae ea earum fugit quas quidem, repellendus vel veritatis voluptates. Consequuntur,
        praesentium.
    </div>
    <div>Alias animi aspernatur assumenda beatae, delectus dolor dolores et eum excepturi exercitationem explicabo illum
        inventore ipsa iste, molestiae necessitatibus nisi optio qui ratione, rem reprehenderit rerum sed sequi tenetur
        vitae.
    </div>
    <div>Ab aliquam aliquid cumque delectus dolor ea esse est eum facilis minus necessitatibus nihil non numquam officia
        possimus quaerat quas quasi quia quisquam recusandae sed, sint vero vitae, voluptas, voluptatibus.
    </div>
    <div>Accusantium aspernatur at dignissimos dolorum eaque maiores molestiae molestias necessitatibus nostrum
        obcaecati omnis, quae quisquam quod quos repellat suscipit vitae voluptatum? Amet architecto culpa, excepturi
        fugit labore nam quidem temporibus.
    </div>
    <div>Adipisci animi aperiam dignissimos, dolorum eius eos et facilis iure magni minima non omnis porro qui
        quibusdam, quidem totam ut? Ad aliquam architecto, assumenda cumque et nulla odio pariatur saepe!
    </div>
    <div>Ab accusantium aliquam amet architecto, corporis dignissimos dolor dolores ducimus eaque facere fuga harum
        laboriosam nihil, numquam odit perspiciatis ratione sapiente tempora tempore veritatis? Animi consequatur nobis
        quos repudiandae voluptate!
    </div>
    <div>Blanditiis debitis eaque exercitationem inventore minima molestias nemo, numquam obcaecati officia quaerat
        quia, quibusdam quos tempore! Animi beatae, commodi consectetur dignissimos dolor exercitationem explicabo
        incidunt praesentium ratione sed tenetur vitae!
    </div>
    <div>Adipisci aliquam animi architecto, beatae cumque id ipsum non quisquam sint veniam. Ab atque consequatur facere
        illo, ipsum itaque rerum sint! Culpa et, illum impedit officia officiis pariatur quis ut.
    </div>
    <div>Dicta doloremque doloribus est fuga hic laboriosam nesciunt nihil ratione repellat reprehenderit? Alias
        assumenda error, ipsa ipsum magnam nesciunt non officia officiis quaerat totam. Aliquid ducimus est laborum
        laudantium qui.
    </div>
    <div>Expedita facilis impedit minima quia sapiente. Aut et, maxime! At, commodi corporis delectus earum enim eos
        exercitationem expedita, facere fugiat labore molestias odio optio quia recusandae rem tempore unde voluptas.
    </div>
    <div>Adipisci, alias aspernatur blanditiis deleniti eos esse, eum expedita explicabo inventore molestias
        necessitatibus pariatur quae ratione sed, sit temporibus veritatis vitae. Autem, consectetur earum ipsa repellat
        saepe voluptatem? Laboriosam, nobis.
    </div>
    <div>A aliquid consequuntur culpa cum cumque debitis doloremque eaque earum eveniet fugiat impedit labore, libero
        minus nesciunt nihil, nostrum officiis praesentium quibusdam quis rem sapiente similique tempore tenetur
        voluptas voluptatibus!
    </div>
    <div>Hic mollitia perspiciatis reprehenderit tenetur voluptas. Adipisci aspernatur at consequuntur dicta dolor
        dolores ea eius ipsum iusto minus, nisi non nulla perferendis possimus quae qui saepe totam veritatis voluptate
        voluptates.
    </div>
    <div>Accusamus animi assumenda corporis doloremque ducimus est et ex id labore laboriosam laudantium maxime nam
        nostrum officia omnis quibusdam ratione, rem, voluptate? Fuga ipsam magni possimus quisquam sed unde velit!
    </div>
    <div>A accusantium architecto at culpa distinctio eaque eligendi et impedit ipsam itaque laudantium, magni maiores
        molestias nemo nostrum officia pariatur perspiciatis placeat praesentium, quis recusandae repellat saepe tempore
        vitae voluptate.
    </div>
    <div>Accusamus asperiores at consectetur enim, est facere, illo minus molestiae, odio tempora unde velit. Adipisci,
        commodi doloribus necessitatibus quia quibusdam quo ullam! Asperiores, at dolorum fugit harum quae rem velit.
    </div>
    <div>Aperiam architecto atque aut deserunt dignissimos, dolorum eum, expedita harum incidunt ipsa iste laboriosam
        laborum magni molestiae natus nulla officiis perferendis qui soluta suscipit unde ut voluptatum. Earum, eveniet,
        voluptas.
    </div>
    <div>A ad aliquam aperiam atque, consequuntur debitis deleniti dolorum error esse eum eveniet exercitationem facilis
        incidunt ipsam ipsum magnam nam nulla odio quas quia recusandae repellat repellendus, soluta ullam unde?
    </div>
    <div>Alias architecto aut corporis eaque eos ex facere id illo ipsa laudantium minima, molestiae natus neque nisi
        nulla possimus, quibusdam repellendus sapiente similique sunt tempora tempore velit voluptatem! Cum, quidem.
    </div>
    <div>Consectetur eum eveniet placeat quae soluta! Consequuntur dicta ex facilis, harum iure labore nisi quas qui
        reprehenderit tempora! Alias at atque ea eos mollitia odio, optio perspiciatis quos ratione vero!
    </div>
    <div>Alias aliquid architecto at commodi dicta facilis illum, in ipsum iure maxime molestiae necessitatibus neque
        odit porro quae quaerat quia quidem quos reiciendis repellendus sed, sequi sint tempora ut voluptas.
    </div>
    <div>Assumenda cupiditate deserunt id nemo quas sunt. Animi doloremque explicabo itaque iusto labore minima
        molestiae porro soluta, unde voluptatem! Aliquid dignissimos eligendi minima modi, nam nulla omnis sapiente
        vitae? In.
    </div>
    <div>Error iusto molestias optio totam vero voluptate? Animi commodi consequatur cum cumque distinctio doloremque
        doloribus eos eum harum ipsum maiores minus, modi, natus necessitatibus perspiciatis repudiandae sed suscipit,
        ullam vel.
    </div>
    <div>Ducimus iure labore praesentium voluptatum! A dignissimos iste neque nesciunt quam quod similique sit. Modi
        saepe sed voluptatem! Alias dolorum ea et hic impedit molestiae mollitia, omnis quo sequi veritatis.
    </div>
</div>-->


<script>
    let buttonE=document.querySelector('#btn');
    buttonE.addEventListener('click',function (){
        alert('你点击了按钮')
    });

    //鼠标移入事件
    let h4E=document.querySelector('h4');
    h4E.addEventListener('mouseenter',function (){
        console.log('该标题被查看了！');
    })

    //window对象浏览器内置的全局对象，代表了当前浏览器窗口
    /*window.addEventListener('resize',function (){
        alert('窗口大小被修改了');
    });

    window.addEventListener('scroll',function (){
        alert('页面被滚动了');
    })
*/


    //关于JS对象的使用
    let p1 = {
        name:'张三',
        age:18,
        say:function (){
            console.log('我是'+this.name+'，今年'+this.age+'岁')
        }
    };

    console.log(p1.name);
    console.log(p1.age);
    p1.say();

    //先创建一个空对象，再动态给其添加属性和方法
    let p2={};
    p2.name='李四';
    p2.age=20;
    p2.say=function (){
        console.log('我是'+this.name+'，今年'+this.age+'岁')
    };
    console.log(p2.name);
    console.log(p2.age);
    p2.say();
</script>




</body>
</html>